<template>
  <div class="app"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
// import Water from "@/water.js"
// let img = ref()
onMounted(() => {
  //  water.set("水香木鱼");//添加水印名称

  // img.value = new Water("朱斌")
  // console.log(img.value);
  // document.querySelector(".app").appendChild(img.value)

  // 生成水印文本
  var text = 'Watermark'
  var canvas = document.createElement('canvas')
  var ctx = canvas.getContext('2d')
  canvas.width = 200
  canvas.height = 100
  ctx.font = '20px Arial'
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(text, canvas.width / 2, canvas.height / 2)

  // 将水印添加到容器中
  var img = document.createElement('img')
  img.src = canvas.toDataURL('image/png')
  img.style.width = '100%'
  img.style.height = '100%'
  img.style.opacity = '0.5'
  document.querySelector(".app").appendChild(img)
})
</script>

<style lang="scss" scoped></style>
